<template>
  <div class="l-tab-page">
    <l-panel>
      <template #title>
        <el-radio-group
          v-model="labelPosition"
          size="small"
          v-show="active != 3"
        >
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
        </el-radio-group>
      </template>
      <l-layout :topMove="false" :bottomMove="false" :bottom="48">
        <template #top>
          <div class="l-rblock flex flex-center">
            <el-steps :active="active" finish-status="success" simple>
              <el-step title="活动信息"></el-step>
              <el-step title="活动等级"></el-step>
              <el-step title="确认"></el-step>
            </el-steps>
          </div>
        </template>

        <div class="pd-16">
          <!-- 步骤1 -->
          <el-form
            :label-position="labelPosition"
            v-show="active == 1"
            :model="paramsList.one"
            label-width="100px"
            size="mini"
            :rules="rules"
            ref="paramsList.one"
          >
            <el-form-item label="活动名称" prop="name">
              <el-col :span="18">
                <el-input
                  v-model="paramsList.one.name"
                  placeholder="请选择活动名称"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
              <el-col :span="18">
                <el-select
                  v-model="paramsList.one.region"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="活动时间" prop="time">
              <el-col :span="18">
                <el-form-item prop="time">
                  <el-date-picker
                    type="datetimerange"
                    v-model="paramsList.one.time"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="到场人数" prop="age">
              <el-col :span="18">
                <el-slider
                  v-model="paramsList.one.age"
                  show-input
                  show-stops
                ></el-slider>
              </el-col>
            </el-form-item>
            <el-form-item label="活动性质">
              <el-checkbox-group v-model="paramsList.one.type">
                <el-checkbox-button
                  label="线上活动"
                  name="one"
                ></el-checkbox-button>
                <el-checkbox-button
                  label="地推活动"
                  name="two"
                ></el-checkbox-button>
                <el-checkbox-button
                  label="线下活动"
                  name="three"
                ></el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源">
              <el-radio-group v-model="paramsList.one.resource" size="medium">
                <el-radio border label="线上品牌商赞助"></el-radio>
                <el-radio border label="线下场地集资"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="图标" prop="erp_sales_order_f_PurchaseNo">
              <el-col :span="18">
                <l-input-icon v-model="paramsList.one.icons" />
              </el-col>
            </el-form-item>
          </el-form>
          <!-- 步骤2 -->
          <el-form
            :label-position="labelPosition"
            v-show="active == 2"
            :model="paramsList.two"
            label-width="100px"
            size="mini"
            :rules="rules"
            ref="paramsList.one"
          >
            <el-form-item label="活动ID">
              <el-col :span="18">
                <l-guid size="mini" v-model="paramsList.two.guid" />
              </el-col>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-col :span="18">
                <l-BMap-select size="mini" v-model="paramsList.two.map" />
              </el-col>
            </el-form-item>
            <el-form-item label="主办部门">
              <el-col :span="18">
                <l-department-select v-model="paramsList.two.department" />
              </el-col>
            </el-form-item>
            <el-form-item label="活动负责人">
              <el-col :span="18">
                <l-user-select v-model="paramsList.two.people" />
              </el-col>
            </el-form-item>
            <el-form-item label="选择">
              <el-col :span="18">
                <l-layer-select
                  :isPage="true"
                  :columns="[
                    {
                      label: '第0列',
                      prop: 'f_fullname',
                      valueKey: '',
                      width: 100,
                      align: 'left',
                      hidden: false,
                    },
                  ]"
                  :options="list"
                  v-model="paramsList.two.layers"
                />
              </el-col>
            </el-form-item>

            <el-col :span="24">
              <el-divider content-position="center">分割线</el-divider>
            </el-col>
            <el-form-item label="活动城市">
              <el-col :span="18">
                <l-area-select
                  v-model="paramsList.two.address"
                  placeholder="请选择地址"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="活动图片">
              <el-col :span="18">
                <l-upload
                  v-model="paramsList.two.img"
                  listType="picture-card"
                  :placeholder="$t('请输入')"
                />
              </el-col>
            </el-form-item>

            <el-form-item label="主题颜色">
              <el-col>
                <el-color-picker
                  v-model="paramsList.two.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="服务指标">
              <el-col>
                <el-rate v-model="paramsList.two.rate"></el-rate>
              </el-col>
            </el-form-item>
          </el-form>
          <!-- 步骤3 -->
          <el-form
            :label-position="labelPosition"
            v-show="active == 3"
            label-width="100px"
            size="mini"
          >
            <el-timeline>
              <el-timeline-item placement="top">
                <el-card>
                  <h4>活动创建</h4>
                  <el-alert
                    title="点击确定及活动创建成功"
                    type="success"
                    :closable="false"
                  />
                </el-card>
              </el-timeline-item>
              <el-timeline-item placement="top">
                <el-card>
                  <h4>活动提示</h4>
                  <el-alert
                    title="请在活动开始前做好准备"
                    type="info"
                    close-text="知道了"
                  />
                </el-card>
              </el-timeline-item>
              <el-timeline-item placement="top">
                <el-card>
                  <h4>活动提醒</h4>
                  <el-alert
                    title="确认提交即时生效,请勿轻易尝试"
                    type="error"
                    effect="dark"
                    :closable="false"
                  />
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-form>
        </div>

        <template #bottom>
          <div class="l-rblock flex flex-center flex-c-center">
            <el-button size="mini" @click="previou" v-if="active > 1"
              >上一步</el-button
            >
            <el-button size="mini" @click="next" v-if="active <= 2"
              >下一步
            </el-button>
            <el-button size="mini" @click="next" v-else>确定</el-button>
          </div>
        </template>
      </l-layout>
    </l-panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabType: "tab1",
      labelPosition: "right", // 方向
      active: 1,
      paramsList: {
        one: {
          name: "",
          region: "",
          time: "",
          age: 100,
          type: [],
          resource: "",
          icons: "",
        },
        two: {
          color: null,
          rate: null,
          img: "",
          guid: "",
          map: "",
          department: "",
          people: "",
          layers: "",
          address: "",
        },
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur",
          },
          {
            pattern: "^[\u4e00-\u9fa5]{0,}$",
            message: "请输入真实的姓名",
            trigger: "blur",
          },
        ],
        time: [
          {
            required: true,
            message: "请选择时间",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请选择年龄",
            trigger: "blur",
          },
        ],
      },
      list: [
        {
          f_fullname: "张三",
        },
        {
          f_fullname: "李四",
        },
        {
          f_fullname: "王五",
        },
      ],
      lr_erp_productinfo_columns: [
        {
          id: "lr_erp_productinfo_F_Code",
          prop: "f_Code",
          label: "商品编号",
        },
        {
          id: "lr_erp_productinfo_F_Name",
          prop: "f_Name",
          label: "商品名称",
        },
        {
          id: "lr_erp_productinfo_F_BarCode",
          prop: "f_BarCode",
          label: "条码",
        },
        {
          id: "lr_erp_productinfo_F_Place",
          prop: "f_Place",
          label: "产地",
        },
        {
          id: "lr_erp_productinfo_F_Specification",
          prop: "f_Specification",
          label: "规格",
        },
        {
          id: "lr_erp_productinfo_F_Type",
          prop: "f_Type",
          label: "型号",
        },
        {
          id: "lr_erp_productinfo_F_Number",
          prop: "f_Number",
          label: "批次号",
        },
        {
          id: "lr_erp_productinfo_F_Unit",
          prop: "f_Unit",
          label: "单位",
        },
        {
          id: "lr_erp_productinfo_F_Count",
          prop: "f_Count",
          label: "数量",
        },
        {
          id: "lr_erp_productinfo_F_Price",
          prop: "f_Price",
          label: "单价",
        },
        {
          id: "lr_erp_productinfo_F_Amount",
          prop: "f_Amount",
          label: "金额",
        },
      ],
      lr_erp_productinfo_data: [],
    };
  },
  methods: {
    previou() {
      this.active--;
    },
    next() {
      if (this.active++ > 2) this.active = 1;
    },
    handleLr_erp_productinfoAddRow() {
      let point = {};
      point.f_Code = "";
      point.f_Name = "";
      point.f_BarCode = "";
      point.f_Place = "";
      point.f_Specification = "";
      point.f_Type = "";
      point.f_Number = "";
      point.f_Unit = "";
      point.f_Count = "";
      point.f_Price = "";
      point.f_Amount = "";
      this.lr_erp_productinfo_data.push(point);
    },
    handleLr_erp_productinfoDeleteRow(event) {
      this.lr_erp_productinfo_data.splice(event.index, 1);
    },
  },
};
</script>
